<!--
 * @Descripttion: 
 * @Author: 银河以北
 * @Date: 2023-03-01 21:43:52
 * @LastEditors: 银河以北
 * @LastEditTime: 2023-04-22 21:12:15
-->
<template>
    <div class="app-container">
        <div class="menu-container">
            <el-popover :width="380" trigger="click" placement="right">
                <template #reference>
                    <img width="50" src="@/assets/set-up.png" />
                </template>
                <template #default>
                    <div class="item">
                        <p class="title">容器宽度</p>
                        <el-input v-model.number="boxWidth" :disabled="true" placeholder="请输入容器宽度" />
                    </div>
                    <div class="item">
                        <p class="title">每列宽度 <span style="font-size: 12px;">每列宽度=（容器宽度 - 间隙） / 列数 （向下取整）</span></p>
                        <el-input v-model.number="colWidth" @blur="blurChangeColWidth()" :disabled="true"
                            placeholder="请输入每列宽度" />
                    </div>
                    <div class="item">
                        <p class="title">列数 <span style="font-size: 12px;">列数=（容器宽度 - 间隙） / 每列宽度 （向下取整）</span></p>
                        <el-input v-model.number="colNum" @blur="blurChangeColNum()" placeholder="请输入列数" />
                    </div>

                    <div class="item">
                        <p class="title">列间隙<span style="font-size: 12px;">列间隙= 容器宽度 - （每列宽度 * 列数） (最大为50)</span> </p>
                        <el-input v-model.number="colInterval" @blur="blurChangeColInterval()" placeholder="请输入列间隙" />
                    </div>
                    <p style="font-size: 12px;">本项目为vue3开源项目，如果有大佬能指正错误，还希望大佬指正；如果你觉得本项目对你有所帮助，还希望点亮我的star。
                    <el-link type="primary">https://gitee.com/liangjukun/waterfall-flow</el-link></p>

                </template>
            </el-popover>
        </div>
        <WaterFall :boxWidth="boxWidth" :colWidth="colWidths" :colNum="colNum" :colInterval="colIntervals" />

    </div>
</template>

<script setup>
 
    import WaterFall from '@/components/waterfall/index.vue'
    import {
        isPc
    } from '@/utils/utils'
    import {
        ref,
    } from 'vue';

 

    /**
     * 本文件js代码可不看，主要是控制面板函数
     * 瀑布流详细函数可在waterfall组件中查看
     */


    // 容器宽度
    let boxWidth = ref(isPc() ? 1000 : document.documentElement.clientWidth)

    // 每列宽度
    // 计算宽度
    const computeColWidth = () => {
        colWidth.value = Math.floor((boxWidth.value - (colNum.value - 1) * colInterval.value) / colNum.value)
        colWidths.value = colWidth.value

    }

    let colWidth = ref(boxWidth.value / 5)
    let colWidths = ref(colWidth.value)

    // 列数
    // 计算列数
    let colNum = ref(5)

    // 列间隙
    // 计算列间隙
    const computeInterval = () => {
        const width = colWidth.value * colNum.value
        if (width >= boxWidth.value) {
            return 0
        } else {
            return (boxWidth.value - width) / (colNum.value - 1)
        }
    }
    let colInterval = ref(computeInterval())
    let colIntervals = ref(colInterval.value)

    // 改变列宽
    const blurChangeColWidth = () => {
        colNum.value = Math.floor(boxWidth.value / colWidth.value)
        computeColWidth()

    }

    // 改变列数
    const blurChangeColNum = () => {
        colWidth.value = Math.floor(boxWidth.value / colNum.value)
        computeColWidth()
    }

    // 改变列间隙
    const blurChangeColInterval = () => {
        if (colInterval.value > 50) {
            colInterval.value = 50
        }
        colIntervals.value = colInterval.value
        computeColWidth()
    }
</script>
<style lang="scss" scoped>
    .app-container {
        width: 100%;

        .menu-container {
            position: fixed;
            left: 50px;
            top: 50px;
            cursor: pointer;
            z-index: 100;
        }
    }

    .item {
        margin-bottom: 20px;
    }
</style>